<template>
  <div class="home">
    <div class="header">
      <div class="header-title">{{ currentTitle }}</div>
    </div>
    <div class="center-map">
      <baiduMapVue v-if="$store.state.showMap"></baiduMapVue>
    </div>
    <div class="page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import baiduMapVue from './components/common/baiduMap.vue';
export default {
  name: 'home',
  components:{baiduMapVue},
  data() {
    return {
      currentTitle: '分宜停车营收大屏',
      titleMap: {
        '/page1': '分宜停车营收大屏',
        '/page2': '分宜停车数据大屏',
        '/page3': '分宜停车运营大屏',
      },
    };
  },
  watch: {
    // 监听路由变化
    $route: {
      handler(to) {
        this.updateTitle(to.path);
        this.$store.commit('setShowMap', to.path === '/page3'); // 根据路径设置状态
      },
      immediate: true,
    },
  },
  mounted() {
    this.updateTitle(this.$route.path);
  },
  methods: {
    updateTitle(path) {
      // 根据路由路径更新标题
      this.currentTitle = this.titleMap[path] || '分宜停车营收大屏';
    },
  },
};
</script>

<style lang="less">
@font-face {
  font-family: 'PuHuiTi';
  src: url('../assets/font/AlibabaSans-Light.otf');
}
.header {
  height: 0.4167rem;
  background: #03044a;
  display: flex;
  justify-content: center;
  background: url('../assets/fy/titlebg.png') no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  &-title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 0.1875rem;
    color: #ffffff;
    line-height: 0.2604rem;
    text-shadow: 0.0104rem 0rem 0.0365rem rgba(226, 231, 236, 0.71);
    background: linear-gradient(0deg, #4b9cff 0%, #ebffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: PuHuiTi;
    letter-spacing: 0.026rem;
  }
}
.center-map{
  position: absolute;
  top: 0px;
  left: 0;
  width: 10rem;
  height: 100vh;
  z-index: 0;
}

.page {
  margin-top:  0.4167rem;
  // height: calc(~'100% - .4167rem');
}
.home{
  width: 100vw;
  height: 100vh;
  border: 3px solis white;
}
</style>
